<!-- pc端导航 -->
<template>
  <section class="mainNav">
    <div class="wCen">
      <!-- 导航 -->
      <ul class="mainNav_nav" :class="localeCn ? '' : 'en'">
        <!--导航类型 （1：外链，2：内部路由，3：在线编辑）-->
        <li v-for="(item, i) in navs" :key="i">
          <a @click.stop="openPage(item)" :class="{ active: isActive(item) }">{{ item.title }}</a>
          <div v-if="item.children && item.children.length > 0" style="padding-top: 20px">
            <ol>
              <li v-for="(child, j) in item.children" :key="j">
                <a @click.stop="openPage(child)">{{ child.title }}</a>
              </li>
            </ol>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import { getChannelList } from "@/api/common";
import util from "@/libs/util.js";
export default {
  name: "Main-nav",
  computed: {
    // 当前菜单
    isActive() {
      return (v) => {
        let flag = "";
        if (v.link) {
          flag = this.currentRoutePath == v.link ? true : false;
        } else {
          flag = this.currentRoutePath == v.component ? true : false;
        }
        return flag;
      };
    },
  },
  data() {
    return {
      navs: [],
      currentRoutePath: "",
    };
  },
  mounted() {
    this.currentRoutePath = this.$route.path;
    this.getChannelListFun();
  },
  watch: {
    // 监听路由变化通过id获取数据
    $route(to, from) {
      this.currentRoutePath = to.path;
    },
  },
  methods: {
    getChannelListFun() {
      // 加载导航
      this.invoke(getChannelList).then((res) => {
        if (res && res.code == 200) {
          this.navs = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mainNav {
  $border: #a2a2a255;
  position: relative;
  border-top: 1px solid $border;
  border-bottom: 1px solid $border;
  .wCen {
    display: flex;
    align-items: center;
    overflow: visible;
  }

  /* 页面导航 s*/
  &_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      a {
        display: inline-block;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        color: #191e33;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: keep-all;
        position: relative;
        cursor: pointer;
        transition: all 0.3s;

        &::after {
          position: relative;
          bottom: -12px;
          content: "";
          height: 4px;
          width: 100%;
          display: block;
          background-color: transparent;
        }

        &.active,
        &:hover {
          color: #d53b76;

          &::after {
            background-color: #d53b76;
          }
        }
      }
    }

    > li {
      position: relative;
      &:not(:first-child) {
        margin-left: 60px;
      }

      // 二级菜单
      ol {
        display: none;
        background-color: #fff;
        position: absolute;
        min-width: 200px;
        max-width: 600px;
        left: 0;
        top: 58px;
        z-index: 9999;
        box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.21);
        padding: 10px 20px;
        box-sizing: border-box;

        li {
          line-height: 50px;
          height: 50px;
          width: 100%;
          box-sizing: border-box;

          a {
            box-sizing: border-box;
            max-width: 800px;
            width: 100%;
            padding-left: 0;
            text-align: left;
            font-weight: normal;
            font-size: 16px;

            &::after {
              bottom: 6px;
              height: 3px;
            }
          }
        }
      }

      &:hover {
        ol {
          display: block;
        }
      }

      &:last-child {
        div {
          ol {
            left: auto;
            right: 0;
          }
        }
      }
    }
  }
}
.floatBox {
  .mainNav {
    &_nav {
      li {
        a {
          color: #fff;
        }
      }
      > li {
        ol {
          li {
            a {
              color: #191e33;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1560px) {
  .mainNav {
    .wCen {
    }
    // 导航
    &_nav {
      top: 4px;

      li {
        &:not(:last-child) {
          margin-right: 30px;
        }

        a {
          font-size: 16px;
        }
      }

      > li {
        ol {
          li {
            line-height: 40px;
            height: 40px;

            a {
              &.active,
              &:hover {
                background-size: 20px 20px;
                background-position: 0 center;
              }
            }
          }
        }
      }
    }
  }
}
</style>
